<!-- 
    @file: 首页站点信息组件
    @auth: lizibin
 -->
<template>
    <div class="leftCard">
        <el-card shadow="always">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-tag type="success">{{ tagData.browser }}</el-tag>
                </el-col>
                <el-col :span="12">
                    <el-tag type="info">{{ tagData.system }}</el-tag>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-tag type="warning">{{ tagData.ip }}</el-tag>
                </el-col>
                <el-col :span="12">
                    <el-tag type="danger">{{ tagData.location }}</el-tag>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-tag :span="6">{{ tagData.fl }}</el-tag>
                </el-col>
                <el-col :span="5">
                    <el-tag type="danger">{{ tagData.high }}</el-tag>
                </el-col>
                <el-col :span="5">
                    <el-tag type="info">{{ tagData.low }}</el-tag>
                </el-col>
                <el-col :span="6">
                    <el-tag type="">{{ tagData.tq }}</el-tag>
                </el-col>
            </el-row>
            <el-row >
                <el-col :span="24">
                    <el-tag type="warning">{{ tagData.tip }}</el-tag>
                </el-col>
            </el-row>

        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { InsertVisitInfo } from '@/api/foreground/index'

import {
    onMounted,
    reactive,
    toRefs
} from 'vue'
const state = reactive({
    tagData: {}
})
const { tagData } = toRefs(state)
onMounted(() => {
    getMachineIp()
});
/**
* 模块名: 弹出访问者ip+地址
* 代码描述: 弹出访问者ip+地址
* 作者:lizibin
* 创建时间:2023/6/22 20:00:49
*/
const getMachineIp = () => {
    fetch('https://api.vvhan.com/api/visitor.info')
        .then(res => res.json())
        .then(data => {
            state.tagData = data
            // ElNotification({
            //     title: '网站提示',
            //     message: `欢迎IP:${data.query},来自${data.country}${data.regionName}${data.city}的朋友！`,
            //     position: 'bottom-right',
            //     type: 'success',
            // })
            // let ipData = JSON.stringify(data)
            // localStorage.setItem('ipData', ipData)
            // let time = GetNowTime();
            addVisitInfo(data.ip, data.location, data.time)
        })
}

/**
* 模块名: addVisitInfo
* 代码描述:
* 作者:lizibin
* 创建时间:2023/01/02 16:00:56
*/
const addVisitInfo = (ip: string, city: string, time: string) => {
    const params = {
        ip,
        city,
        time
    }
    InsertVisitInfo(params).then((res) => {
        if (res.code == 0) {

        } else {
            // ElNotification({
            //     title: '系统提示',
            //     message: '保存访问信息失败',
            //     type: 'error',
            // });
        }
    })
}

</script>

<style scoped>
@media screen and (max-width:1800px) {
    .leftCard {
        display: none;
    }
}
.leftCard {
    position: fixed;
    top: 100px;
    left: 20px;
    width: 300px;
}

.el-row {
    margin-top: 10px;
}
</style>